import { Card, Form, Input, Button, Checkbox } from "antd";
import { Link } from "react-router-dom";
import bgImage from "@/image/bg.png";
import './index.less'

export default function LoginPage() {
  const onFinish = (values: any) => {
    console.log("Success:", values);
  };

  return (
    <div className="login-page" style={{
      backgroundImage: `url(${bgImage})`
    }}>
      <div  className="title">汽车质量管理平台登录</div>
      <Card className="login-card">
        <Form
          name="login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          layout="vertical"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked">
            <Checkbox>记住登录</Checkbox>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              立即登录
            </Button>
          </Form.Item>

          <div className="register-link">
            还没有账号？<Link to="/user/register">立即注册</Link>
          </div>
        </Form>
      </Card>
    </div>
  );
}
